<template>
  <div class="posttable">
    <el-row>
      <el-col style="padding-right: 30px;padding-left: 60px;">
        <div class="addform addForm">
          <el-form :label-position="labelPosition" ref="form" :model="form" :rules="rules">
            <el-row class="change">
              <el-col>
                <el-col :span="5">
                  <el-form-item label="客户简称" prop="customerName" style="margin-bottom: 10px;">
                    <el-select
                      disabled
                      v-model="form.customerName"
                      placeholder="请选择客户简称"
                    >
                      <el-option
                        v-for="(item,index) in customerNames"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="5" :offset="1">
                  <el-form-item label="沟通对象" prop="target" style="margin-bottom: 10px;">
                    <el-input v-model.trim="form.target" placeholder="请输入沟通对象"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                <el-form-item label="时间" prop="time">
                  <el-date-picker
                    type="date"
                    placeholder="请选择时间"
                    v-model="form.time"
                    value-format="yyyy-MM-dd"
                    style="width: 274px;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
                <el-col :span="5" :offset="1">
                  <el-form-item label="客户目前状态" prop="customerStatus" style="margin-bottom: 10px;">
                    <el-select
                      v-model="form.customerStatus"
                      placeholder="请选择客户目前状态"
                    >
                      <el-option
                        label="短期无需求"
                        value="短期无需求"
                      ></el-option>
                      <el-option
                        label="中期无需求"
                        value="中期无需求"
                      ></el-option>
                      <el-option
                        label="长期无需求"
                        value="长期无需求"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col style="margin-top:20px">
                <el-form-item>
                  <el-button class="save" :disabled="senddis" @click="submitForm('form')">提交</el-button>
                  <el-button class="canceL" @click="cancel('form')">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "editCustomer",
  props: {
    currentData: {
        type: Object
      },
  },
  data() {
    return {
      labelPosition: "top",
      form: {
        id:'',
        customerName: "",
        target: "",
        time: "",
        name:'',
        customerStatus : ''
      },
      customerNames: [],
      customerId: "",
      rules: {
        customerName: [
          { required: true, message: "请选择客户简称", trigger: "change" }
        ],
        target: [
          { required: true, message: "请输入沟通对象", trigger: "blur" }
        ],
        time: [
          { required: true, message: "请选择时间", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入沟通人", trigger: "blur" }
        ],
        customerStatus: [
          { required: true, message: "请选择客户目前状态", trigger: "change" }
        ],
      },
      largeerror1: false,
      kehujiancheng: "",
      senddis: false,
      errordialogVisible: false,
      errorinfo: null,
      disabled: false,
      dialogFormVisible: false,
      historydata: [],
      totalcount: null,
      disabled1: false,
      dialogFormVisible1: false,
      historydata1: [],
      totalcount1: null,
      actionurl: null
    };
  },
  created() {
    this.form.id = this.customerId;
      axios
      .get(this.url + "/assistantcommunicate/getcustomernames") // 客户名称下拉列表请求
      .then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
        }
      });
      axios
        .post(this.url + "/assistantcommunicate/select", {
          id: this.currentData.id + ""
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (res.data.data !== null) {
              this.form = res.data.data;
            }
          }
        });
  },
  methods: {
   

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.senddis = true;
            for (let i = 0, len = this.customerNames.length; i < len; i++) {
              if (this.form.customerName == this.customerNames[i].name) {
                this.customerId = this.customerNames[i].id;
              }
            }
            axios
              .post(
                this.url + "/assistantcommunicate/updateassistantdata",
                this.form
              )
              .then(res => {
                this.unlogin(res.data.code);
                if (res.data.code === 200) {
                  this.$emit("getData");
                  this.senddis = false;
                }
                this.initdata();
                this.$refs.form.resetFields();
              });
     
        }
      });
    },
    // cancelForm() {
    //   this.$emit("hide");
    // },

    initdata() {
      this.senddis = false;
      this.disabled = false;
      this.disabled1 = false;
      this.form = {
        id:'',
        customerName: "",
        target: "",
        time: "",
        name:''
      };
      (this.customerNames = []), (this.postNameList = []);
      this.postLevelList = [];
    },

    cancel(formName) {
      this.senddis = false;
      this.savedis = false;
      this.historydata = [];
      this.historydata1 = [];
      this.currentPage = 1;
      this.currentPage1 = 1;
      this.selectfile = false;
      this.filetype = true;
      this.filetype1 = true;
      this.file = {};
      this.fileList = [];
      this.file1 = {};
      this.fileList1 = [];
      this.$emit("getData");
      this.$emit("getbackData");
      this.initdata();
      this.$refs.form.resetFields();
    },
    resetFields(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
.addform {
  color: #333 !important;
}

.storage {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #4e72f3;
  border-radius: 4px;
  margin-right: 43px;
  border-color: #4e72f3;
}

.save {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  margin-right: 43px;
  background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
}

.canceL {
  width: 150px;
  height: 40px;
  border: 1px solid #4e6ef5;
  font-size: 16px;
  font-weight: 500;
  color: #4e6ef5;
}

.upload {
  width: 194px;
  height: 44px;
  margin-top: 10px;
  /*margin-bottom: 30px;*/
}

.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
